<template>
  <div class="container-y">
      <div class="title"><img src="../assets/number.png" alt=""></div>
      <div class="title-text">选择适合您的课时</div>
      <div class="tab-box">
          <div class="tab-item"
          :class="{'active': index === choosetabs}" 
           @click="gochange(index,choosetab.id,choosetab.shopPrice)"
           :key="index"
           v-for="(choosetab,index) in choosetablist">
           <div class="type">{{choosetab.instruction}}</div>
           <div class="munber"> {{choosetab.shopPrice}}</div>
           </div>
      </div>
      <p class="text-c">*试听次数为3次</p>
      <div class="form-table-box">
          <div class="table-li">
              <span class="explain">课程类型</span>
              <span class="explain-desc">一对一外教课</span>
          </div>
          <div class="table-li">
              <span class="explain">课程时长</span>
              <span class="explain-desc">25分钟／节</span>
          </div>
          <div class="table-li">
              <span class="explain">价格</span>
              <span class="explain-desc">¥{{shopPrice}}</span>
          </div>
      </div>
      <div class="next-go" @click="goPay"> 微信支付</div>
  </div>
</template>
<script>
export default {
  data () {
	return {
       choosetablist:[],
       choosetabs:0,
       payId:1,
       number:"20:00",
       shopPrice:"0:00",
       orderId:"",
       shiting:""
     }
  },
  mounted(){
    this.getINformation()
  },
  methods:{
      gochange(index,id,price){
         this.choosetabs=index
         this.payId=id
         index==0?this.number='20:00':this.number='0:00'
         this.shopPrice=price
         this.shiting=index
      },
      getINformation(){
        this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/getProduct')
          .then((res) => {
              console.log(res)
              this. choosetablist=res.data.data
          })
      },
      jsApiCall()
            {
                let _this=this
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',
                    this.jsApiParameters,
                    function(res){
                        WeixinJSBridge.log(res.err_msg);
                        // this.$router.push({ path:'/Mypersonal'})
                        if(res.err_msg == "get_brand_wcpay_request:ok"){
                       // alert(res.err_code+res.err_desc+res.err_msg);
                        window.location.href="http://www.chenyekeji.com/easy-English/#/ChooseTime?order="+_this.orderId;
                    }else{
                        //返回跳转到订单详情页面
                        alert(支付失败);
                            
                    }
                    }
                );
            },
            callpay()
            {
                if (typeof WeixinJSBridge == "undefined"){
                    if( document.addEventListener ){
                        document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
                    }else if (document.attachEvent){
                        document.attachEvent('WeixinJSBridgeReady', this.jsApiCall); 
                        document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
                    }
                }else{
                   this.jsApiCall();
                }
            },
     goPay(){//是否试听三次判断
         if(this.shiting==3){
           this.checkout()
         }else{

      
         let data={
            userId:this.$route.query.userId,
            productId:this.payId,
            phone:this.$route.query.phonenumber
         }
          this.$axios.get('http://www.chenyekeji.com/bsti-rbac/pay/payment',{
              params:data
          })
          .then((res) => {
              console.log(res)
                this.jsApiParameters=res.data.data.parameters
                this.orderId=res.data.data.orderNum
                this.callpay()
          })
       }
     } ,
     goapyNow(){//支付
         
         let data={
            userId:this.$route.query.userId,
            productId:this.payId,
            phone:this.$route.query.phonenumber
         }
          this.$axios.get('http://www.chenyekeji.com/bsti-rbac/pay/payment',{
              params:data
          })
          .then((res) => {
              console.log(res)
                this.jsApiParameters=res.data.data.parameters
                this.orderId=res.data.data.orderNum
                this.callpay()
          })
     },
     checkout(){
        this.$axios.post('http://www.chenyekeji.com/bsti-rbac/wechat/checkst?userId='+this.$route.query.userId)
          .then((res) => {
              if(res.data.data==true){
                 this.goapyNow() 
              }else{
                  this.$vux.alert.show({
                    title: 'Sorry',
                    content: "试听课次数为3次，您的试听课机会已用完。",
                    onShow () {
                        console.log('Plugin: I\'m showing')
                    },
                    onHide () {
                    }
                })
              }
          })
     }  ,
  }
}
</script>
<style scoped>
.type{
    flex:1;
    padding: 0 28px;
    display: flex;
    align-items: center;
}
.next-go{
    line-height: 75px;
    height: 75px;
    background: #ff3434;
    text-align: center;
    font-size: 32px;
    margin: 30px 20px 0 20px;
    color: #fff;
    border-radius: 4px;
}
.next-go a{
   color: #fff;  
   display: block;
}
  .title{
      padding:60px 0;
      display: flex;
      justify-content: center;
  }
  .title img{
      height:32px;
      width:296px;
  }
  .title-text{
      font-size: 32px;
      color: #ff3434;
      text-align: center;
  }
  .munber{
      height:80px;
      line-height: 80px;
  }
  .tab-box{
      padding-top: 110px;
      display: flex;
      color: #ff3434;
      margin: 0 20px;
      justify-content: space-between;
  }
  .tab-box .active{
    background: #ff3434;
    color: #fff694;
    box-shadow: 0px 0px 1px 1px #f97878;
    border: 0;
  }
  .tab-item{
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      box-sizing: border-box;
      width:170px;
      background: #f6f6f6;
      height: 296px;
      display: flex;
      flex-flow: column;
      font-size: 28px;
  }
  .text-c{
      font-size: 22px;
      text-align: left;
      padding:14px 20px 0 20px;
      color: #aaaaaa;
      line-height: 22px;
    }
  .form-table-box{
      padding-left:20px;
      padding-top:30px;
      padding-bottom: 38px;
  }
  .table-li{
      height: 64px;
      line-height: 64px;
      border-bottom: 1px solid #f2f2f2;
      font-size: 28px;
      overflow: hidden;
      color: #999999;
  }
  .explain{
      text-align: left;
      float: left;
  }
  .explain-desc{
      float: right;
      padding-right: 20px;
      color: #333333;
  }
  .explain-red{
      float: right;
      color: #ff3434;
      padding-right: 20px;
  }
</style>

